<template>
  <div class="fa-item" >
        <div class="fa-header">
          <div class="fa-user">
            <div class="fa-user-avatar" @click="goUserHome(data.uid)">
              <img :src="data.avatar" alt="" />
            </div>
            <div class="fa-user-text">
              <div class="fa-user-text-name">{{data.username}}</div>
              <div class="fa-user-text-news">
                <span>{{data.create_time}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="fa-content" >
          <div class="fa-tips" v-if="!textState">
            点赞了你的文章!
          </div>
          <div class="fa-comment" v-else>
            <div class="fa-comment-info" v-html="$utils.parsingEmoji(data.comment)">

            </div>
          </div>
          <div class="fa-content-art" @click.stop="goArtlce(data)">
            <div class="fa-content-art-pic" >
                <img v-if="data.istype===1" :src="data.pic_list[0]" alt="">
                <img v-else-if="data.istype===2" :src="data.video_pic" alt="">
            </div>
            <div class="fa-content-text">
              <div class="fa-content-title">
                <p class="fa-content-title-user">@{{user.username}}</p>
                <p class="fa-content-content" v-html="$utils.parsingEmoji(data.content)"> </p>
              </div>
            </div>
          </div>
        </div>
        <div class="fa-operation">
          <!-- <div class="fa-info">
              <span> <i class=" iconfont  icon-xiaoxi"></i> </span>
              <span class=" span-text">回复 </span>
          </div> -->
        </div>
      </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: {
    data: {
      type: Object,
      default: null
    },
    textState: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapState(['user'])
  },
  methods: {
    // 跳转文章详情页面
    goArtlce (data) {
      // console.log(data)
      this.$router.push({ path: '/home/articleDetail', query: { uid: data.uid, cid: data.cid } })
    },
    // 跳转到查看其他用户详情
    goUserHome (uuid) {
      if (this.user.uid === uuid) {
        this.$router.push({ path: '/user/myhome' })
      } else {
        this.$router.push({ path: '/home/userHome', query: { uuid: uuid } })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
 .fa-item {
      width: 93%;
      padding: 12px  3.5% ;
      height: auto;
      height: auto;
      background: #fff;
      border-radius: 5px;
      margin-bottom: 10px;
      .fa-header {
        width: 100%;
        .fa-user {
          width: 100%;
          height: auto;
          display: flex;
          justify-content: flex-start;
          .fa-user-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 8px;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              display: block;
              transition: all 0.2s;
              cursor: pointer;
              &:hover{
                filter: brightness(70%);
              }

            }
          }
          .fa-user-text {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .fa-user-text-name {
              color: #000;
              font-weight: 700;
              margin-top: 3px;
              font-size: 14px;
              cursor: pointer;
              &:hover{
                color: #f60;
              }
            }
            .fa-user-text-news {
              color: #999;
              font-size: 12px;
              margin-bottom: 3px;

            }
          }
        }
      }
      .fa-content{
        margin-left: 60px;
        margin-top: 5px;
        width: auto;
        .fa-tips{
          font-size: 14px;
          color: #666;
        }
        .fa-comment{
          font-size: 14px;
          color: #666;
        }
        .fa-content-art{
          width: auto;
          display: flex;
          margin-top: 10px;
          background: #f5f5f5;
          border-radius: 8px;
          overflow: hidden;
          cursor: pointer;
          transition: all 0.2s;
          &:hover{
            background: rgb(224, 224, 224);
          }
          .fa-content-art-pic{
            width: 100px;
            height: 100px;
            img{
              width: 100%;
              height: 100%;
              display: block;
              object-fit: cover;
               transition: all 0.2s;
              &:hover{
                filter: brightness(70%);
              }
            }
          }
          .fa-content-text{
            margin-left: 10px;
            display: flex;
            .fa-content-title{
              margin: auto;
              font-size: 12px;
              color: #666;
              .fa-content-title-user{
                font-size: 14px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .fa-content-content{
                overflow: hidden;
                display: inline-block;
                white-space: normal;
                -webkit-line-clamp: 2;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
                letter-spacing: 0;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                height: 40px;
                line-height: 20px;
              }
              p{
                margin: 3px 0;
                width: 320px;

              }
            }
          }
        }
      }
      .fa-operation{
        width: 100%;
        margin: 0 auto;
        padding-top: 10px;
        .fa-info{
          color: #999;
          margin: 0 auto;
          width: 50px;
          height: auto;
          display: flex;
          flex-direction: column;
          span>i{
            text-align: center;
            font-size: 20px;
            display: block;
          }
          .span-text{
            font-size: 12px;
          }
          span{
            display: block;
            width: 100%;
            text-align: center;
          }
          &:hover{
            color: #f60;
            cursor: pointer;
          }
        }
      }
    }
  @media screen and (min-width:540px) and (max-width:768px) {
    .fa-item {
      width: 93%;
      padding: 12px  3.5% ;
      height: auto;
      height: auto;
      background: #fff;
      border-radius: 5px;
      margin-bottom: 10px;
      .fa-header {
        width: 100%;
        .fa-user {
          width: 100%;
          height: auto;
          display: flex;
          justify-content: flex-start;
          .fa-user-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 8px;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              display: block;
              transition: all 0.2s;
              cursor: pointer;
              &:hover{
                filter: brightness(70%);
              }

            }
          }
          .fa-user-text {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .fa-user-text-name {
              color: #000;
              font-weight: 700;
              margin-top: 3px;
              font-size: 14px;
              cursor: pointer;
              &:hover{
                color: #f60;
              }
            }
            .fa-user-text-news {
              color: #999;
              font-size: 12px;
              margin-bottom: 3px;

            }
          }
        }
      }
      .fa-content{
        margin-left: 60px;
        margin-top: 5px;
        width: auto;
        .fa-tips{
          font-size: 14px;
          color: #666;
        }
        .fa-comment{
          font-size: 14px;
          color: #666;
        }
        .fa-content-art{
          width: auto;
          display: flex;
          margin-top: 10px;
          background: #f5f5f5;
          border-radius: 8px;
          overflow: hidden;
          cursor: pointer;
          transition: all 0.2s;
          &:hover{
            background: rgb(224, 224, 224);
          }
          .fa-content-art-pic{
            width: 100px;
            height: 100px;
            img{
              width: 100%;
              height: 100%;
              display: block;
              object-fit: cover;
               transition: all 0.2s;
              &:hover{
                filter: brightness(70%);
              }
            }
          }
          .fa-content-text{
            width: 4.68rem;
            margin-left: 10px;
            display: flex;
            .fa-content-title{
              margin: auto;
              font-size: 12px;
              color: #666;
              .fa-content-title-user{
                font-size: 14px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .fa-content-content{
                overflow: hidden;
                display: inline-block;
                white-space: normal;
                -webkit-line-clamp: 2;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
                letter-spacing: 0;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                height: 34px;
                line-height: 17px;
              }
              p{
                margin: 3px 0;
                width: 320px;

              }
            }
          }
        }
      }
      .fa-operation{
        width: 100%;
        margin: 0 auto;
        padding-top: 10px;
        .fa-info{
          color: #999;
          margin: 0 auto;
          width: 50px;
          height: auto;
          display: flex;
          flex-direction: column;
          span>i{
            text-align: center;
            font-size: 20px;
            display: block;
          }
          .span-text{
            font-size: 12px;
          }
          span{
            display: block;
            width: 100%;
            text-align: center;
          }
          &:hover{
            color: #f60;
            cursor: pointer;
          }
        }
      }
    }
}
  @media screen  and (max-width:540px) {
    .fa-item {
      width: 93%;
      padding: 12px  3.5% ;
      height: auto;
      height: auto;
      background: #fff;
      border-radius: 5px;
      margin-bottom: 10px;
      .fa-header {
        width: 100%;
        .fa-user {
          width: 100%;
          height: auto;
          display: flex;
          justify-content: flex-start;
          .fa-user-avatar {
            width: 1.03rem;
            height: 1.03rem;
            border-radius: 50%;
            overflow: hidden;
            margin-right: 8px;
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              display: block;
              transition: all 0.2s;
              cursor: pointer;
              &:hover{
                filter: brightness(70%);
              }

            }
          }
          .fa-user-text {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .fa-user-text-name {
              color: #000;
              font-weight: 700;
              margin-top: 3px;
              font-size: .3rem;
              cursor: pointer;
              &:hover{
                color: #f60;
              }
            }
            .fa-user-text-news {
              color: #999;
              font-size: .25rem;
              margin-bottom: 3px;

            }
          }
        }
      }
      .fa-content{
        margin-left: 60px;
        margin-top: 5px;
        width: auto;
        .fa-tips{
          font-size: .3rem;
          color: #666;
        }
        .fa-comment{
          font-size: .3rem;
          color: #666;
        }
        .fa-content-art{
          width: auto;
          display: flex;
          margin-top: 10px;
          background: #f5f5f5;
          border-radius: 8px;
          overflow: hidden;
          cursor: pointer;
          transition: all 0.2s;
          &:hover{
            background: rgb(224, 224, 224);
          }
          .fa-content-art-pic{
            width: 2.1rem;
            height: 2.1rem;
            img{
              width: 100%;
              height: 100%;
              display: block;
              object-fit: cover;
               transition: all 0.2s;
              &:hover{
                filter: brightness(70%);
              }
            }
          }
          .fa-content-text{
            width: 4.68rem;
            margin-left: 10px;
            display: flex;
            .fa-content-title{
              margin: auto;
              font-size: .25rem;
              color: #666;
              .fa-content-title-user{
                font-size: .3rem;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
              .fa-content-content{
                overflow: hidden;
                display: inline-block;
                white-space: normal;
                -webkit-line-clamp: 2;
                text-overflow: ellipsis;
                -webkit-box-orient: vertical;
                letter-spacing: 0;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                height: 34px;
                line-height: 17px;
              }
              p{
                margin: 3px 0;
                width: 6rem;

              }
            }
          }
        }
      }
      .fa-operation{
        width: 100%;
        margin: 0 auto;
        padding-top: 10px;
        .fa-info{
          color: #999;
          margin: 0 auto;
          width: 50px;
          height: auto;
          display: flex;
          flex-direction: column;
          span>i{
            text-align: center;
            font-size: 20px;
            display: block;
          }
          .span-text{
            font-size: 12px;
          }
          span{
            display: block;
            width: 100%;
            text-align: center;
          }
          &:hover{
            color: #f60;
            cursor: pointer;
          }
        }
      }
    }
}
</style>
